import { LitElement, html, css } from 'lit';
import { unsafeCSS } from 'lit';
import commonStyles from '@/main.css?inline';

class XHeader extends LitElement {
  static styles = css`
    ${unsafeCSS(commonStyles)}
    header {position: sticky; top: 0; z-index: 999; background: white;box-shadow: 0 5px 5px#eeeeee70;}
    .container {height: 60px;display: flex; justify-content: space-between; align-items: center; margin: 0 auto;}
    .left {width: 50px;}
    .center {height: 100%;display: flex; align-items: center;gap: 10px}
    .nav-list {text-decoration: none;padding: 0 15px;font-weight: 500;height: 100%;display: flex; align-items: center;transition: all 0.3s;}
    .nav-list:hover {background-color: #eeeeee70;}
    .active {color: red;}
    .box-wrap {width: 100%; padding-top: 100%; position: relative;}
    .box-wrap .box-content {position: absolute; inset:0 ;display: flex; justify-content: center; align-items: center;}
  `
  static properties = {
    nav: { type: Array },
    activeRoute: { type: String }
  }
  constructor() {
    super();
    this.nav = [
      { name: '首页', href: '/' },
      { name: '产品展示', href: '/products' },
      { name: '新闻资讯', href: '/news' },
      { name: '关于我们', href: '/about' }
    ]
    this.activeRoute = window.location.pathname;
  }
  changeRoute(route) {
    this.activeRoute = route;
  }
  render() {
    return html`
      <header>
        <div class="x-w-lg container">
          <div class='left box'>
            <div class="box-wrap">
              <div class="box-content">
                <img src="/icon.svg" alt="logo">
              </div>
            </div>
          </div>
          <nav class="center">
            ${this.nav.map(item => html`<a href="${item.href}" @click="${() => this.changeRoute(item.href)}" class="nav-list ${this.activeRoute === item.href ? 'active' : ''}">${item.name}</a>`)}
          </nav>
          <div class="right">

          </div>
        </div>
      </header>
    `;
  }
}

customElements.define('x-header', XHeader);